/** Adapted from https://github.com/atom-material/atom-material-syntax-light */

@import 'util.sass'

.hljs
  display: block
  overflow-x: auto
  padding: 1em
  background: $bg-disabled
  color: $text-default
  -webkit-font-smoothing: antialiased
  text-size-adjust: 100%
  font: 300 100%/1 Roboto Mono, monospace
  font-size: 14px

.hljs>*::selection,
.hljs-section
  background-color: $bg-normal

.hljs-comment
  color: $text-minor
  font-style: italic

.hljs-tag,
.hljs-selector-tag,
.hljs-regexp,
.hljs-meta
  color: fui-color(purple, 5)

.hljs-string,
.hljs-subst
  color: fui-color(green, 5)

.hljs-number,
.hljs-variable,
.hljs-template-variable
  color: $secondary-active

.hljs-name,
.hljs-keyword,
.hljs-type,
.hljs-attribute
  color: $primary-normal

.hljs-title,
.hljs-function>.hljs-title,
.hljs-symbol,
.hljs-bullet,
.hljs-built_in,
.hljs-builtin-name,
.hljs-link
  color: fui-color(blue, 4)

.hljs-params
  color: fui-color(red, 4)

.hljs-addition
  color: fui-color(blue, 4)
  display: inline-block
  width: 100%

.hljs-deletion
  color: fui-color(red, 5)
  display: inline-block
  width: 100%

.hljs-selector-id,
.hljs-selector-class
  color: $text-mute

.hljs-emphasis
  font-style: italic

.hljs-strong
  font-weight: bold

.hljs-link
  text-decoration: underline
